<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="div01">
					<div id="div02">测试1</div>
					<div id="div03">测试1</div>
					<div id="div04">测试1</div>
				</div>
				<ul id="ul01">
					<li>香蕉</li>
					<li>西瓜</li>
					<li>葡萄</li>
					<li>苹果</li>
				</ul>
		
				<div>
					节点名字:<input type="text" id="txtNodeName" /><br />
					节点类型:<input type="text" id="txtNodeType" /><br />
					节点值:<input type="text" id="txtNodeValue" /><br />
					子节点数量:<input type="text" id="txtQty" /><br />
				</div>
				<button onclick="foo(1)">回到根节点</button>
				<button onclick="foo(2)">得到当前元素的第一个子元素</button>
				<button onclick="foo(3)">得到当前元素的最后一个子元素</button>
				<button onclick="foo(4)">得到当前元素的前一个兄弟元素</button>
				<button onclick="foo(5)">得到当前元素的后一个兄弟元素</button>
				<button onclick="foo(6)">得到当前元素的父元素</button>
		
				<script>
					var cur; // 保存正在显示的节点
					function foo(op) {
						if (op == 1) {
							cur = document.documentElement; // html节点
						}
						else if(op == 2)
						{
							cur = cur.firstChild;
						}
						else if(op == 3)
						{
							cur = cur.lastChild;
						}
						else if(op == 4)
						{
							cur = cur.previousElementSibling;
						}
						else if(op == 5)
						{
							cur = cur.nextElementSibling;
						}
						else if(op == 6)
						{
							cur = cur.parentNode;
						}
						
		
						txtNodeName.value = cur.nodeName;
						txtNodeType.value = cur.nodeType;
						txtNodeValue.value = cur.nodeValue;
						txtQty.value = cur.childNodes.length;
					}
				</script>
	</body>
</html>
